<template>
  <div class="login-container flx-center">
    <div class="login-box flx-around">
      <!-- <div class="left-box">
        <img src="@/assets/images/login_bg.png" alt="login" />
      </div> -->
      <div class="right-box">
        <div class="left-box1">
          <div class="left-box-item">
            <div class="img-item">
              <img class="login-icon" src="@/assets/images/logo.png" alt="" />
            </div>
            <div class="text-item">
              <h3 class="text-title">找靠谱工作</h3>
              <span class="text-info">上千万职联</span>
            </div>
          </div>
          <div class="left-box-item">
            <div class="img-item">
              <el-icon color="#fff" :size="32"><Suitcase /></el-icon>
            </div>
            <div class="text-item">
              <h3 class="text-title">优质</h3>
              <span class="text-info">海量职位任你选</span>
            </div>
          </div>
          <div class="left-box-item">
            <div class="img-item">
              <el-icon color="#fff" :size="32"><ChatLineRound /></el-icon>
            </div>
            <div class="text-item">
              <h3 class="text-title">高效</h3>
              <span class="text-info">在线沟通即时反馈</span>
            </div>
          </div>
        </div>
        <div class="left-box2">
          <div class="left-box2-wrapper">
            <div class="left-box2-title">经销商管理系统</div>
            <div class="left-box2-img">
              <el-tooltip effect="light" content="扫码登录" placement="left">
                <el-button @click="flagCode = !flagCode" link type="primary">
                  <el-icon>
                    <Grid />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="left-box2-form-wrapper">
            <el-tabs v-if="!flagCode" v-model="activeName" class="demo-tabs" :stretch="true">
              <el-tab-pane label="帐号密码登录" name="byaccount"><LoginForm /></el-tab-pane>
              <el-tab-pane label="手机号登录" name="byphone"> <LoginPhone /></el-tab-pane>
            </el-tabs>
            <div v-if="flagCode" class="left-box2-code-wrapper"><LoginCode /></div>
          </div>
        </div>
      </div>
    </div>
    <div class="info-box-wrapper">
      <span>违法不良信息举报电话: 4000128820</span> <span>.版权所有@</span><span>苏州千万职联科技有限公司</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import LoginForm from "./components/LoginForm.vue";
import LoginPhone from "./components/LoginPhone.vue";
import LoginCode from "./components/LoginCode.vue";
// import LoginPhone from "./LoginPhone.vue";
import { ChatLineRound, Suitcase } from "@element-plus/icons-vue";

const activeName = ref("byaccount");
const flagCode = ref(false);
</script>
<style scoped lang="scss">
.login-container {
  position: relative;
  min-width: 550px;
  height: 100%;
  min-height: 500px;
  background-color: #eeeeee;
  // border: 1px solid red;

  display: flex;
  flex-direction: column;

  .login-box {
    width: 90%;
    height: 90%;
    padding: 0 50px;

    border-radius: 20px;
    background: url("../../assets/images/login_bg.png") no-repeat;
    background-color: rgba(42, 130, 228, 1);

    display: flex;
    align-items: center;
    justify-content: center;

    .right-box {
      // border: 1px solid red;
      width: 720px;
      height: 450px;
      background: #fff;
      // padding: 50px 40px 45px;
      border-radius: 10px;
      box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.3);

      display: flex;

      .left-box1 {
        width: 270px;
        height: 100%;
        border-radius: 10px 0 0 10px;
        background: rgba(42, 130, 228, 1);
        // border: 1px solid red;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .left-box-item {
          width: 100%;
          // border: 1px solid green;
          // display: flex;
          // justify-content: center;
          // align-items: center;

          .img-item {
            // border: 1px solid red;
            width: 120px;
            height: 55px;
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 55px;
              height: 55px;
            }

            svg {
              width: 55px;
              height: 55px;
            }
          }

          .text-item {
            // border: 1px solid green;
            overflow: hidden;
            font-size: 1rem;
            color: #fff;

            .text-title {
              font-size: 16px;
              font-weight: 700;
              margin: 10px 0;
            }

            .text-info {
              font-size: 12px;
            }
          }
        }
        .left-box-item:nth-child(2) {
          margin: 20px 0;
        }
      }

      .left-box2 {
        overflow: hidden;
        flex: 1;
        height: 100%;

        .left-box2-wrapper {
          width: 100%;
          height: 60px;

          display: flex;
          align-items: center;
          justify-content: space-between;

          .left-box2-title {
            color: rgba(42, 130, 228, 1);
            font-size: 0.9rem;
            font-weight: 600;
            margin-left: 15px;
          }

          .left-box2-img {
            border: 1px solid var(--el-color-primary);
            border-radius: 4px;
            margin-right: 10px;
          }
        }

        .left-box2-form-wrapper {
          padding: 10px 2rem;
          height: 390px;
        }
      }

      .login-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 45px;

        .login-icon {
          width: 68px;
          height: 68px;
        }
        .logo-text {
          padding: 0 0 0 25px;
          margin: 0;
          font-size: 40px;
          font-weight: bold;
          color: #34495e;
          white-space: nowrap;
        }
      }
    }
  }

  .info-box-wrapper {
    height: 20px;
    position: absolute;
    bottom: 10px;

    span {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--el-color-info);
    }
  }
}
</style>
